<template>
  <div class="step1">
    <el-form class="step_form" :model="props.formData" ref="formRef" :rules="formRule" label-position="left" :disabled="props.look">
      <div class="con_title">推送时间</div>
      <el-form-item label="SOP时间设置" class="mar0_form_item">
        <el-radio-group v-model="props.formData.rule_effective_time">
          <el-radio label="1" value="1">立即开始</el-radio>
          <el-radio label="2" value="2">根据有效期</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="con_title step1_two">通知配置</div>
      <el-form-item label="汇总通知：">
        <el-switch v-model="props.formData.notice_switch"></el-switch>
        <span class="notice_tips">开启后，每日固定时间点发送应用消息通知创建人指定成员的任务完成情况
          <el-popover trigger="hover" effect="light" placement="top" width="auto" popper-class="tooltop_add">
            <template #default>
              <img src="@/assets/image/tips.png" style="width: 200px; height: 120px" />
            </template>
            <template #reference>
              <span class="see_tips">查看示例</span>
            </template>
        </el-popover>
          <!-- <span class="see_tips">查看示例</span> -->
        </span>
      </el-form-item>
      <el-form-item v-if="props.formData.notice_switch" label="周期设定：" class="mar0_form_item">
       每<el-input class="cust_message_min" v-model="props.formData.specific_day" min="1" max="60" type="number"></el-input>天
        <el-time-select
          v-model="props.formData.specific_time"
          placeholder="请选择时间"
          start="00:00"
          step="00:30"
          end="23:59"
        />
      </el-form-item>
      <el-form-item v-if="props.formData.notice_switch" label="通知员工：" class="mar0_form_item">
        <div>通知创建人</div>
        <el-checkbox v-model="props.formData.assign_staff" label="及指定员工" name="type" true-label="2" false-label="1" />
        <el-button class="staff_btn" type="primary" @click="openDepart" :disabled="props.formData.assign_staff==1">选择员工</el-button>
      </el-form-item>
      <br />
      <div class="user_list">
        <el-tag v-for="tag in creators" :key="tag.id" :closable="!props.look" @close="removeDepart(tag.id)">{{ tag.name }}</el-tag>
      </div>
    </el-form>
    <!--选择成员 -->
    <ZWDepart ref="DepartRef" @submit="getDepart" :type="1"/>
  </div>
</template>
<script lang="ts" setup>
  import {ref,reactive} from 'vue'
  import ZWDepart from '@/components/ZWDepart.vue'
  const props = defineProps(['formData','look'])
  import {getSetionId} from '@/utils/utils'
  const creators = ref([]);
  const look = ref(false)
  const DepartRef = ref(null)

  const sopSence = reactive([
    {id:'1',name:'客户唤醒'},
    {id:'2',name:'新客户'},
    {id:'3',name:'客户阶段转化'},
    {id:'4',name:'生日'},
    {id:'5',name:'节日'},
    {id:'6',name:'客户分局'},
  ])
   //打开使用成员弹框
  const openDepart = () => {
    DepartRef.value.appDialog.title = "选择员工";
    DepartRef.value.departVisble = true;
    DepartRef.value.selectedMember = creators.value;
    // DepartRef.value.isExternal = true //设置外部联系人
    
  };
  const formRule = reactive({
    assign_work_user_ids:{required:true,message:'指定员工不能为空',trigger:'blur'}
  })
  // 获取使用成员
  const getDepart = (res: any) => {
    console.log(res,'====');
    creators.value = res;
    props.formData.assign_work_user_ids = getSetionId('id',creators.value)
  };
  // 删除
  const removeDepart = (key:number)=>{
    let arr = creators.value.find((item:any)=>item.id==key)
    creators.value = creators.value.filter((item:any)=>item.id!==key)
    DepartRef.value.removeItem(arr);
    props.formData.assign_work_user_ids = getSetionId('id',creators.value)
  }
  defineExpose({
    creators,
  })
  
</script>

<style lang="scss" scoped>
.step1{
  .step1_one{
    border-bottom: 1px solid #EAEAEA;
  }
  .step1_two{
    margin-top: 20px;
  }
  .con_title{
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #33302D;
    margin-bottom: 20px;
  }
  .step1_two{
    border-top: 1px solid #EAEAEA;
    padding-top: 30px;
  }
  .notice_tips{
    font-size: 12px;
    font-family: STHeitiSC-Light, STHeitiSC;
    font-weight: 300;
    color: #FF6B00;
    margin-left: 10px;
    .see_tips {
      color: black;
      font-size: 14px;
      margin-left: 10px;
      font-weight: 600;
    }
  }
  .staff_btn{
    margin-left: 10px;
  }
  .step_form{
    .mar0_form_item{
      margin-bottom: 0;
    }
  }

  .user_list {
    margin: 0 0 20px 72px;
    :deep(.el-tag) {
      margin: 8px;
      .el-tag__content {
        .tag_icon {
          width: 10px;
          margin-right: 6px;
        }
      }
    }
  }
  .cust_message_min {
    width: 120px;
    margin: 0 10px;
  }
}
</style>